import React from 'react'
import ReactDOM from 'react-dom'
import { createStore } from 'redux'

//2创建一个纯函数用来修改list的数据
//state 为之前的状态值   action 存储是将要操作的状态
function reducer(state, action) {
  console.log(state)
  console.log(action)
  //追加数据
  if (action.type == 'ADD') {
    state.list.unshift(action.payload)
  }
  //修改数量
  if (action.type == 'ADDNUM') {
    state.list[action.payload].num++
  }
  return state
}
var goods = [
  { id: 1, goodsname: '苹果1', num: 1, price: 300 },
  { id: 2, goodsname: '苹果2', num: 1, price: 400 },
  { id: 3, goodsname: '苹果3', num: 1, price: 500 },
  { id: 4, goodsname: '苹果4', num: 1, price: 600 }
]

//1创建一个仓库用来存储数据
const store = createStore(reducer, {
  list: goods
})

class Test extends React.Component {
  number() {
    var number = 0
    for (var i in store.getState().list) {
      number += store.getState().list[i].num
    }
    return number
  }
  render() {
    return <div>我看到的数据是{this.number()}</div>
  }
}

class App extends React.Component {
  constructor() {
    super()
    this.state = {
      arr: [],
      number: '结算(0)'
    }
    //订阅信息  让页面的数据和store数据保持同步
    store.subscribe(() => {
      this.setState({})
    })
  }
  //追加数据
  add() {
    //做数据修改的时候  需要向reducer派发通知，并且会传递一个type
    //dispatch({type,payload})  type:修改的
    // console.log(this.state.arr);
    // for(var i in this.state.arr){
    // 	var s='ch'+this.state.arr[i]
    // 	console.log(this.props[s])
    // }
    console.log(this.refs.ch1)
    //获取到所有的文本框
    store.dispatch({
      type: 'ADD',
      payload: { id: 5, goodsname: '苹果8', num: 1, price: 3000 }
    })
  }

  addNum(key) {
    store.dispatch({
      type: 'ADDNUM',
      payload: key
    })
    this.countNum()
  }

  //显示选中产品的总价
  //思路  需要数组存储选中的数据  然后把选中数组的数据做一个总价的计算  和商品数量的计算
  //首先选中用户选择数据
  //当执行这个函数的时候 首先把k拿到数组arr中去比较，如果存在说明现在需求是取消选中 如果不存在说明需求是选中   取消选中把当前的值从数组中移除 选中是把当前的值添加到数组中
  count(k) {
    //获取所有的文本框 如果val值在数组中 选中 否则不选中
    var list = this.state.arr
    var s = list.findIndex((value, index, list) => value == k)
    if (s == -1) {
      list.push(k)
    } else {
      list.splice(s, 1)
    }
    this.setState({
      arr: list
    })
    this.countNum()
  }
  //计算选中的总价格
  total() {
    var list = this.state.arr
    //在list中存储的是选中商品的id  需要到store.getstate().list中根据id计算总的价格
    var total = 0

    for (var i in list) {
      for (var j in store.getState().list) {
        if (list[i] == store.getState().list[j].id) {
          total += store.getState().list[j].num * store.getState().list[j].price
        }
      }
    }

    return total
  }
  //统计选中的数量
  countNum() {
    var number = 0
    var list = this.state.arr
    for (var i in list) {
      for (var j in store.getState().list) {
        if (list[i] == store.getState().list[j].id) {
          number += store.getState().list[j].num
        }
      }
    }
    number = '结算(' + number + ')'
    this.setState({
      number: number
    })
  }

  render() {
    return (
      <div>
        {/*获取store中的数据  store.getState().list*/}
        {store.getState().list.map((item, key) => {
          return (
            <ul key={item.id}>
              <li>
                <input
                  type="checkbox"
                  ref={'ch' + item.id}
                  value={item.id}
                  onClick={() => {
                    this.count(item.id)
                  }}
                />
              </li>
              <li>{item.goodsname}</li>
              <li>
                {item.num}
                <button
                  onClick={() => {
                    this.addNum(key)
                  }}
                >
                  增加
                </button>
              </li>
              <li>{item.price}</li>
            </ul>
          )
        })}
        <div>
          你选中数据的价格为：{this.total()}
          <input type="button" value={this.state.number} />
        </div>

        <input
          type="button"
          value="追加数据"
          onClick={() => {
            this.add()
          }}
        />
        <hr />
        <Test />
      </div>
    )
  }
}
ReactDOM.render(<App />, document.getElementById('app'))
